<template>
  <div class="prj-panel">
    <!-- 查询条件 -->
    <SearchPanel show-fold>
      <div ref="queryFormBox" class="clearfix search-flex-box pms-queryShow">
        <el-form ref="queryForm" :model="queryParams" class="el-queryFrom" size="mini">
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="queryParams.projectName" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div class="search-panel-btn">
          <el-button v-debounce="()=>doSearch('1')" type="primary" class="pms-button-primary search-btn">查询</el-button>
          <el-button size="mini" class="pms-button search-btn" @click="resetSearch()">重置</el-button>
        </div>
        <div />
      </div>
    </SearchPanel>
    <!-- 查询结果 -->
    <SearchList style="margin-top: 16px">
      <!-- 列表按钮 -->
      <template v-slot:header-btn>
        <!-- <el-button @click="prjManage" type="" class="pms-button">项目操作</el-button> -->
        <el-button type="" class="pms-button-primary">
          信息/状态同步
        </el-button>
      </template>
      <!-- 列表内容 -->
      <template v-slot:body>
        <div class="tableContainer">
          <el-table :data="tableData" border style="width: 100%" highlight-current-row>
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="PRJCODE" label="项目编码" show-overflow-tooltip />
            <el-table-column align="center" prop="processInstName" label="项目名称" width="500" show-overflow-tooltip>
              <template slot-scope="scope">
                <a
                  style="
                    color: #33aaff;
                    text-decoration: underline;
                    display: block;
                    text-align: left;"
                  @click="showInfo(scope.row)"
                >
                  {{ scope.row.processInstName }}
                </a>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="materialStatus" label="审批意见" width="100" />
            <el-table-column align="center" prop="PRJTYPE" label="项目类型" show-overflow-tooltip />
            <el-table-column align="center" prop="workItemName" label="当前办理节点" show-overflow-tooltip />
            <el-table-column align="center" prop="startTime" label="送办时间" show-overflow-tooltip />
            <el-table-column align="center" prop="outputState" label="销项审计状态" width="100" />
            <el-table-column align="center" prop="retentionTime" label="滞留时长(天)" show-overflow-tooltip />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </template>
    </SearchList>
  </div>
</template>

<script>
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
// 系统常量配置
import SysConst from '@/common/const'

export default {
  name: 'Demo',
  components: { SearchPanel, SearchList },
  data() {
    return {
       // 查询条件样式
      styleParam: {
        col: 5,
        labelWidth: '120px'
      },
      // 查询条件
      queryParams: {
        prjCode: '', // 项目编码
        projectName: '', // 项目名称
        prjYear: '', // 项目年份
        orgParticipantName: '', // 建设单位
        siteId: '', // 站址编码

        isNewbusiness: '', // 业务类型
        prjType: '', // 项目类型
        buildModes: '', // 建设方式
        prjStage: '', // 项目阶段
        jdStatus: '', // 项目节点

        demandId: '', // 需求单编号
        ifUseSite: '', // 主动规划类型
        specialItem: '', // 整治类型
        prjTab: '', // 项目标签
        isPl: '', // 是否批量 = 主子项目

        ifDivideDes: '', // 是否分摊设计费
        ifDivideSupvis: '', // 是否分摊监理费
        province: '', // 省分
        city: '', // 地市
        county: '', // 区县

        busCaseId: '', // 能源/智联业务编码
        businessType: '', // 能源一级业务模式
        businessSubclassSec: '', // 能源二级业务模式
        isRevocation: '0', // 是否已销项
        pageSize: SysConst.PAGESIZE,
        pageSizes: SysConst.PAGESIZES
      },
      // 页面控制参数
      controlFlag: {
        isFold: {
          height: '64px'
        }, // 查询条件展开/收起：默认收起
        disByPrjType: true, // 项目类型 控制 一级业务模式/二级业务模式 是否可筛选：默认不允许筛选
        disByBuildModels: true, // 建设方式 控制 主动规划类型 是否可筛选：默认不允许筛选
        configColumn: false, // 打开自定义列名页面
        disByProvince: false, // 省分：默认允许选择
        disByCity: false // 地市：默认循序选择
      },
      // 查询结果
      tableData: [],
      total: 0,
      // 分页信息
      pageParam: {
        pageSize: SysConst.PAGESIZE,
        pageSizes: SysConst.PAGESIZES,
        currentPage: SysConst.CURRENT_PAGE,
        total: SysConst.TOTAL,
        layout: SysConst.TABLE_LAYOUT
      }
    }
  },
  methods: {
    // 查询
    getList(flag) {
      const data = {
        records: [
        //   {
        //     PRJCODE: '23Z12SDJA011000019',
        //     processInstName: '中国铁塔山东分公司济南市分公司2024年第712批整体项目资产购置（简单）整体项目',
        //     PRJTYPE: '整体项目',
        //     workItemName: '资源录入',
        //     startTime: '2023-07-20 21:06:51',
        //     outputState: '',
        //     retentionTime: '1',
        //     flag: 'B'
        //   },
          {
            PRJCODE: '23Z12SDJA011000017',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '决算项目',
            workItemName: '决算编制',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'C'
          },
          {
            PRJCODE: '23Z12SDJA011000017',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '决算项目',
            workItemName: '决算送审',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'D'
          },
          {
            PRJCODE: '23Z12SDJA011000017',
            processInstName: '验工计价综合查询',
            PRJTYPE: '验工计价',
            workItemName: '综合查询',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'E'
          },
          {
            PRJCODE: '23Z12SDJA011000017',
            processInstName: '验工计价项目操作',
            PRJTYPE: '验工计价',
            workItemName: '项目操作',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'F'
          },
          {
            PRJCODE: '23Z12SDJA011000017',
            processInstName: '验工计价项目操作验工计价查看',
            PRJTYPE: '验工计价',
            workItemName: '项目操作',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'Ee'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '电子签章',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'G'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '电子签章配置',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'H'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '电子签章校验配置',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'I'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '附件管理',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'J'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '综合查询-文档信息',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'K'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '附件信息',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'L'
          },
          {
            PRJCODE: '附件管理',
            processInstName: '中国铁塔山东分公司济南市分公司2022年第712批整体项目资产购置（简单）整体项目',
            PRJTYPE: '电子签章代办',
            workItemName: '临时的',
            startTime: '2023-07-10 21:06:51',
            outputState: '',
            retentionTime: '1',
            flag: 'M'
          }
        ],
        total: 1
      }
       this.total = data.total
       this.tableData = data.records
        // _http.queryMaterialInfos({
        //     pageNum: flag ? 1 : this.pageParam.currentPage,
        //     pageSize: this.pageParam.pageSize,
        //     ...this.queryParams,
        // }).then(res => {
        //     if (res.code == 200) {
        //         this.pageParam.total = res.data.total;
        //         this.tableData = res.data.records;
        //     } else {
        //         this.$message({
        //             offset: 300,
        //             type: "warning",
        //             message: res.data.message,
        //         });
        //     }
        // }).catch(err => {
        //     console.log("queryMaterialInfos@", err);
        // });
    },
    // 列表：点击项目名称查看详情
    showInfo(row) {
      let page
      if (row.flag === 'C') {
        page = this.$router.resolve({
          name: 'actualBudgetDetail'
        })
      } else if (row.flag === 'D') {
        page = this.$router.resolve({
          name: 'actualBudgetDraftDetail'
        })
      } else if (row.flag === 'F') {
        page = this.$router.resolve({
          name: 'checkoutValuationOperationDetail'
        })
      } else if (row.flag === 'E') {
        page = this.$router.resolve({
          name: 'CheckoutValuationDetail'
        })
      } else if (row.flag === 'Ee') {
        page = this.$router.resolve({
          name: 'designSupervisionDetail'
        })
      } else if (row.flag === 'G') {
        page = this.$router.resolve({
          name: 'ElectronicSignature'
        })
      } else if (row.flag === 'H') {
        page = this.$router.resolve({
          name: 'ElectronicSignConfig'
        })
      } else if (row.flag === 'I') {
        page = this.$router.resolve({
          name: 'EleSignVerConfig'
        })
      } else if (row.flag === 'J') {
        page = this.$router.resolve({
          name: 'AttachmentManage'
        })
      } else if (row.flag === 'K') {
        page = this.$router.resolve({
          name: 'DocumentInfo'
        })
      } else if (row.flag === 'L') {
        page = this.$router.resolve({
          name: 'AttachmentInfo'
        })
      } else if (row.flag === 'M') {
        page = this.$router.resolve({
          name: 'ElectronicSealAgent'
        })
      } else {
        page = this.$router.resolve({
          name: 'AcceptManageDetail'
        })
      }
      window.open(page.href, '_blank')
    },
    doSearch(ee) {
      console.log('我被点击了', ee)
      // this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-col-5 {
    max-width: 20%;
    flex: 0 0 20%;
}
</style>

